<app-head [msg]="this" [msg1]="title"></app-head>
<div [ngClass]="{gray: showColor}"></div>
<br><br><br>
<div *ngFor=" let item of allAddressmsg; let key = index">
<div class="address_box"  *ngIf="showAll[key] === 1 && item !== null">
  <div class="address_box_top">
    <div class="address_box_top_head">
      <span class="name">{{item.receive_name}}</span>
      <span class="tel">{{item.receive_tel}}</span>
    </div>
    <div class="address_box_top_botom">
      <span>
        {{item.province_name}}{{item.city_name}}{{item.area}}{{item.details}}
      </span>
    </div>
  </div>
  <div class="address_box_botom">
    <div class="address_box_botom_div">
      <div class="address_box_botom_div_left" (click)="showImg(key)">
        <img src="assets/address/address_chooseGray.png" *ngIf="checkArr[key] !== 1">
        <img src="assets/address/address_chooseRed.png" *ngIf="checkArr[key] === 1">
        <span>默认地址</span>
      </div>
      <div class="address_box_botom_div_right">
        <img src="assets/address/addressEdit.png" (click)="editAddress(key)">
        <img src="assets/address/wastebin.png" (click)="delAddress(key)">
      </div>
    </div>
  </div>
</div>
</div>
<!--确认删除提示框-->
<div class="confirmDel" *ngIf="showConfirmDel">
  <div class="confirmDel_top">
    <span>确实要删除该商品吗?</span>
  </div>
  <div class="confirmDel_botom">
    <div class="cancel" (click)="doCancel()">
      <span>取消</span>
    </div>
    <div class="confirm" (click)="doOk()">
      <span>确定</span>
    </div>
  </div>
</div>
<!--确认设置默认地址框-->
<div class="confirmDel" *ngIf="showSetConfirm">
  <div class="confirmDel_top">
    <span>确实要设置默认地址吗?</span>
  </div>
  <div class="confirmDel_botom">
    <div class="cancel" (click)="doSetCancel()">
      <span>取消</span>
    </div>
    <div class="confirm" (click)="doSetOk()">
      <span>确定</span>
    </div>
  </div>
</div>
<div class="tabar" (click)="showTabar()">
  <span>+ 新增地址</span>
</div>
<br><br><br><br>
<div class="addAddress_box" *ngIf="showtabar">
  <div class="addAddress_box_title_box">
    <div class="addAddress_box_title">
      <span>新增收货地址</span>
      <img src="assets/cancel/u496.png" (click)="closeTabar()">
    </div>
  </div>
  <div class="addAddress_box_name_box">
    <div>
      <span>姓名</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="user" [(ngModel)]="userName" (blur)="blurname()">
      <div class="error" *ngIf="errorName">请输入正确姓名</div>
    </div>
  </div>
  <div class="addAddress_box_tel_box">
    <div>
      <span>联系电话</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="tel" [(ngModel)]="tel" (blur)="blurtel()">
      <div class="error" *ngIf="errorTel">请输入正确电话</div>
    </div>
  </div>
  <div class="addAddress_box_address_box" >
    <span>收货地址</span>
    <span>
      <select name="provinceId" [(ngModel)]="provinceId" (change)="chooseCity()">
        <option value="">请选择省</option>
        <option value="{{item.province_id}}"  *ngFor=" let item of provinceArr">{{item.province_name}}</option>
      </select>
      <select name="cityId" [(ngModel)]="cityId" (change)="chooseCounty()">
        <option value="">请选择市</option>
       <option value="{{item.city_id}}" *ngFor=" let item of cityArr">{{item.city_name}}</option>
      </select>
      <select name="areaId" [(ngModel)]="areaId">
        <option value="">请选择区域</option>
       <option value="{{item.areaid}}" *ngFor=" let item of countArr">{{item.area}}</option>
      </select>
    </span>
  </div>
  <div class="addAddress_box_detailAddress_box">
    <span>详细地址</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" name="detailaddress" [(ngModel)]="detailaddress" (blur)="blurDetailaddress()">
  </div>
  <div class="postalCode">
    <span>邮政编码</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" name="postalCode" [(ngModel)]="postalCode" (blur)="blurpostalCode()">
  </div>
  <div class="addAddress_box_Preservation" (click)="doseave()">
    <span>保存</span>
  </div>
</div>
<!--编辑信息-->
<div class="addAddress_box" *ngIf="showEdit">
  <div class="addAddress_box_title_box">
    <div class="addAddress_box_title">
      <span>编辑收货地址</span>
      <img src="assets/cancel/u496.png" (click)="closeEdit()">
    </div>
  </div>
  <div class="addAddress_box_name_box">
    <div>
      <span>姓名</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="user" [(ngModel)]="userName" (blur)="blurname()">
      <div class="error" *ngIf="errorName">请输入正确姓名</div>
    </div>
  </div>
  <div class="addAddress_box_tel_box">
    <div>
      <span>联系电话</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="tel" [(ngModel)]="tel" (blur)="blurtel()">
      <div class="error" *ngIf="errorTel">请输入正确电话</div>
    </div>
  </div>
  <div class="addAddress_box_address_box" >
    <span>收货地址</span>
    <span>
      <select name="provinceId" [(ngModel)]="provinceId" (change)="chooseCity()">
        <option value="provinceid">{{province}}</option>
        <option value="{{item.province_id}}"  *ngFor=" let item of provinceArr">{{item.province_name}}</option>
      </select>
      <select name="cityId" [(ngModel)]="cityId" (change)="chooseCounty()">
        <option value="cityid">{{city}}</option>
       <option value="{{item.city_id}}" *ngFor=" let item of cityArr">{{item.city_name}}</option>
      </select>
      <select name="areaId" [(ngModel)]="areaId">
        <option value="areaid">{{area}}</option>
       <option value="{{item.areaid}}" *ngFor=" let item of countArr">{{item.area}}</option>
      </select>
    </span>
  </div>
  <div class="addAddress_box_detailAddress_box">
    <span>详细地址</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" name="detailaddress" [(ngModel)]="detailaddress" (blur)="blurDetailaddress()">
  </div>
  <div class="postalCode">
    <span>邮政编码</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" name="postalCode" [(ngModel)]="postalCode" (blur)="blurpostalCode()">
  </div>
  <div class="addAddress_box_Preservation" (click)="doseaveEdit()">
    <span>保存</span>
  </div>
</div>
